<template>
	<div style="display: flex">
    <div style="background-color: white;width: 160px;height: 150px;display: flex;justify-content: space-around;align-items: center;flex-direction: column;">
      <span class="myOrder" @click="clickMyOrder()" ref="myOrderRef">我的订单</span>
      <span class="distributionAds" @click="clickDistributionAds()" ref="distributionAdsRef">配送地址</span>
    </div>
    <div style="background-color: white;width: 100%;display: flex;">
      <div style="display: flex">
        <div style="width: 20px;background-color: #e7e7e7"></div>
        <div v-if="isShowMyOrder"><!--这是我的订单层-->
          <div v-for="item in orderMsgContent">
            <div><!--组件-->
              <order-msg-child @refreshfatherdata="refreshCurrentData()" :order-msg-content="item"/>
            </div>
            <div style="width: 1050px;height: 20px;background-color: #e7e7e7"></div>
          </div>
        </div>
        <div v-if="!isShowMyOrder"><!--这是配送地址层-->
          <set-address-child @updatedataemit="updateDataEmit()" :content-val="content"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import SetAddressChild from "../../components/content/personController/SetAddressChild";

  import OrderMsgChild from "../../components/content/personController/OrderMsgChild";

  import {mapGetters,mapActions} from "vuex";
  import {requestShippingAdsMsgByUserId,requestOrderDataByUserId,requestOrderComMsgDataByUserId} from "../../network/home";

  export default {
    name: "SetAddress",
    components: {
      SetAddressChild,
      OrderMsgChild
    },
    data(){
      return {
        content: null,
        orderMsgContent: [],
        isShowMyOrder: true
      }
    },
    mounted() {
      //在刚刚挂载dom的时候，调用点击我的订单方法，并且暗淡配送地址字样
      this.clickMyOrder();
      this.opacityFont(this.$refs.distributionAdsRef);
    },
    methods: {
      ...mapActions({
        loadDataForShippingAddress: "ShippingAddress/loadDataForShippingAddress",
        loadDataForOrder: "Order/loadDataForOrder",
        loadDataForOrderComMsg: "OrderComMsg/loadDataForOrderComMsg"
      }),
      refreshCurrentData(){//子组件传给父组件的刷新方法
        this.refreshOrderDatas()
      },
      getAndUpdateData(){//获取和更新数据的方法
        this.content = this.getData;
      },
      updateDataEmit(){//子组件的更新数据事件
        this.refreshDatas();
      },
      updateOrderMsgContent(){//更新订单信息表的方法
        console.log(this.getAllOrderMsgAndOrderComMsg);
        this.orderMsgContent = this.getAllOrderMsgAndOrderComMsg;
      },
      clickMyOrder(){//点击我的订单字符
        this.isShowMyOrder = true;
        //暗淡配送地址并且点亮我的订单
        this.opacityFont(this.$refs.distributionAdsRef);
        this.lightFont(this.$refs.myOrderRef);
      },
      clickDistributionAds(){//点击配送地址
        this.isShowMyOrder = false;
        //暗淡我的订单并且点亮配送地址
        this.opacityFont(this.$refs.myOrderRef);
        this.lightFont(this.$refs.distributionAdsRef);
      },
      opacityFont(ele){//暗淡字体方法
        if (ele) ele.style.opacity = 0.5;
      },
      lightFont(ele){//点亮字体方法
        if (ele) ele.style.opacity = 1;
      },
      refreshDatas(){
        //向后台请求数据
        requestShippingAdsMsgByUserId(this.getUserId)
          .then(data => {
            //调用方法将数据替换到store中
            this.loadDataForShippingAddress(data.data);
            return Promise.resolve(true);
          }).then(data => {
          //调用刷新session数据的方法
          this.refreshShippingAddressSessionStorageData;
          //更新地址模块的component信息
          this.getAndUpdateData();
        }).catch(data =>{
          console.log(data);
        })
      },
      refreshOrderDatas(){//刷新订单信息的方法
        //向后台请求数据，请求的是订单信息，每个订单对应有多个订单商品信息，所以在订单信息请求过来之后要再次请求订单信息
        requestOrderDataByUserId(this.getUserId)
          .then(data => {
            //调用方法将数据替换到store中
            this.loadDataForOrder(data.data);
            if (data.data) return Promise.resolve(data.data);
          }).then(data => {
            let orderId = "";
            data.filter(item => {//取出订单信息中所有订单编号
              orderId += item.orderId+","
            })
            //请求订单商品信息
            return requestOrderComMsgDataByUserId(orderId.substring(0,orderId.length-1))
          }).then(data => {
            //调用方法将数据替换到store中
            this.loadDataForOrderComMsg(data.data);
            return Promise.resolve(true);
          }).then(data => {
            //调用刷新session数据的方法
            this.refreshOrderSessionStorageData;
            //调用刷新session数据的方法
            this.refreshOrderComMsgSessionStorageData;
            //更新订单模块的component信息
            this.updateOrderMsgContent();
          }).catch(data =>{
            console.log(data);
          })
      }
    },
    computed: {
      ...mapGetters({
        "getData": "ShippingAddress/getData",
        getUserId: "UserMsg/getUserId",
        refreshShippingAddressSessionStorageData: "ShippingAddress/refreshShippingAddressSessionStorageData",
        refreshOrderSessionStorageData: "Order/refreshOrderSessionStorageData",
        refreshOrderComMsgSessionStorageData: "OrderComMsg/refreshOrderComMsgSessionStorageData",
        getAllOrderMsgAndOrderComMsg: "Order/getAllOrderMsgAndOrderComMsg"
      }),
    },
    created() {
      //地址信息
      if (sessionStorage.getItem("ShippingAddress")){//判断该数据是否已经在session当中存在
        //将sessionStorage中的数据赋值给vuex
        this.loadDataForShippingAddress(JSON.parse(sessionStorage.getItem("ShippingAddress")));
        //更新地址模块的component信息
        this.getAndUpdateData();
      }else {
        //请求数据并刷新数据
        this.refreshDatas();
      }

      //订单信息
      if (sessionStorage.getItem("Order") && sessionStorage.getItem("OrderComMsg")){//判断该数据是否已经在session当中存在
        //将sessionStorage中的数据赋值给vuex
        this.loadDataForOrder(JSON.parse(sessionStorage.getItem("Order")));
        //将sessionStorage中的数据赋值给vuex
        this.loadDataForOrderComMsg(JSON.parse(sessionStorage.getItem("OrderComMsg")));
        //更新订单模块的component信息
        this.updateOrderMsgContent();
      }else {
        //请求数据并刷新数据
        this.refreshOrderDatas();
      }
      this.updateOrderMsgContent();
    }
  }
</script>

<style scoped>
  .myOrder{
    margin-top: 15px;font-size: 13px;cursor: pointer
  }
  .myOrder:hover{
    color: red;
  }
  .distributionAds{
    margin-bottom: 15px;font-size: 13px;cursor: pointer
  }
  .distributionAds:hover{
    color: red;
  }
</style>
